<template>
  <div class="Progress-neg-container">
    <div class="title">Top 5 areas for improvement</div>
    <div class="chart-container">
      <PieChart :option="optionAnnular" :height="'1.4375rem'"></PieChart>
    </div>
  </div>
</template>
<script>
import PieChart from "@components/common/PieChart.vue";
export default {
  components: {
    PieChart,
  },
  data() {
    return {
      optionAnnular: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },

        grid: {
          left: "15%", // 增加左侧空间（原30%）
          right: "5%", // 右侧留少量空间
          top: "7%",
          bottom: "5%", // 为图例留空间
          containLabel: false, // 改为false，手动控制间距
        },
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          data: ["#lorem", "#lorem", "#lorem", "#lorem"],

          axisLine: { show: false },
          axisTick: { show: false },
          // align: "left", // 关键设置：左对齐
          margin: 20,
          axisLabel: {
            align: "left",
            margin: 60, // 增加左边距防止重叠
            verticalAlign: "middle",
            color: "#232323",
            fontSize: 12,
            overflow: "truncate",
            fontWeight: "400", // 可选：加粗（normal/bold）
            // fontFamily: "Arial", // 可选：字体
          },
          boundaryGap: [0.1, 0.1], // [左侧留白比例，右侧留白比例]
        },
        // barCategoryGap: 5,
        // barGap: 10,
        series: [
          {
            name: "Real rate",
            type: "bar",
            stack: "total",
            barWidth: 23, //  固定宽度20px
            label: {
              show: true,
              position: "insideRight", // 显示在柱形内部左侧
              formatter: (params) => {
                // 计算百分比（假设最大总和为2380）
                const total = 2380; // 最大总和（Real rate + Potential rate）
                const percent = Math.round((params.value / total) * 100);
                return `${percent}%`;
              },
              color: "#fff",
              fontSize: 10, // 调整字体大小
            },
            emphasis: {
              focus: "series",
            },
            data: [1800, 901, 1800, 1890],
            itemStyle: {
              color: "#E51837", // 红色
              borderColor: "#fff",
              borderWidth: 2,
              borderRadius: [6, 6, 6, 6],
            },
          },
          {
            name: "Potential rate",
            type: "bar",
            stack: "total",
            barWidth: 23, //  固定宽度20px
            label: {
              show: true,
              position: "insideRight", // 显示在柱形内部左侧
              formatter: (params) => {
                // 计算百分比（假设最大总和为2380）
                const total = 2380; // 最大总和（Real rate + Potential rate）
                const percent = Math.round((params.value / total) * 100);
                return `${percent}%`;
              },
              color: "#fff",
              fontSize: 10, // 调整字体大小
            },
            emphasis: {
              focus: "series",
            },
            data: [1800, 1800, 1800,1555],
            itemStyle: {
              color: "#8F8F8F", // 浅红色
              borderColor: "#fff",
              borderWidth: 2,
              borderRadius: [6, 6, 6, 6],
            },
          },
          {
            name: "Potential rate",
            type: "bar",
            stack: "total",
            barWidth: 23, //  固定宽度20px
            label: {
              show: true,
              position: "insideRight", // 显示在柱形内部左侧
              formatter: (params) => {
                // 计算百分比（假设最大总和为2380）
                const total = 2380; // 最大总和（Real rate + Potential rate）
                const percent = Math.round((params.value / total) * 100);
                return `${percent}%`;
              },
              color: "#fff",
              fontSize: 10, // 调整字体大小
            },
            emphasis: {
              focus: "series",
            },
            data: [1800, 1800, 934, 1866],
            itemStyle: {
              color: "#2FAA68", // 浅红色
              borderColor: "#fff",
              borderWidth: 2,
              borderRadius: [6, 6, 6, 6],
            },
          },
        ],
      },
    };
  },
};
</script>
<style scoped lang="scss">
.Progress-neg-container {
  background: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  //   justify-content: space-between;
  //   margin-top: 32px;
  // width: 3.8958rem;
  //   width: 3.8958rem;
  //   height:1.7569rem;
  padding: 16px 24px;
  border-radius: 8px;
  border: 1px solid #cdcccc;
  .title {
    font-size: 18px;
    color: #454545;
    font-weight: 600;
  }
}
</style>
